<template>
	<div class="send-gift-wrap">
		<i class="send-gift-close-icon" @click="closeGift"></i>
		<div class="send-gift-top-wrap">
			<div class="send-gift-select-wrap" >
				送给<select name="send-gift-select" v-model="giftSelected">
					<option value="">请选择</option>
					<option v-for="item in giftArr" :value="item.uid" :key="item.uid">{{item.appdata.nickname}}</option>
				</select>
				<i class="send-gift-select-icon"></i>
			</div>
			<div class="send-gift-coin-wrap">
				<span class="ell ubi-num">U币:{{user.coin}}枚</span>
				<a href="javascript:" class="gift-recharge-btn" @click="rechargeLogic">充值</a>
			</div>
		</div>
		<div class="send-gift-middle-wrap" v-if="swiperArr.length">
			<div class="gift-swipe-wrap">
				<swiper class="swiper-container" :options="swiperOption">
					<swiper-slide v-for="(item, index) in swiperArr" :key="index">
						<div class="gift-wrap">
							<div class="gift-inner-wrap">
								<a href="javascript:;" class="gift-item-a" :class="{'active': itemindex === giftActiveIndex && page === index + 1}" v-for="(item, itemindex) in swiperArr[index]" :key="item.gift_id" @click="giftClick(itemindex,index,item)">
									<img :src="`${roompara.show_url}${item.gift_thumb_img_v3}`" :alt="item.gift_desc">
									<p class="gift-item-desc">{{item.gift_name}}  {{item.gift_price}}</p>
								</a>
							</div>
						</div>
					</swiper-slide>
					<div class="swiper-pagination" slot="pagination"></div>
				</swiper>
			</div>
		</div>
		<div class="send-gift-bottom-wrap fix">
			<div class="send-gift-num-wrap fl">
				<span>数量</span><span class="num-btn" :class="{'active': num === item }" v-for="(item, index) in giftNumArr" :key="index" @click="chooseNum(item)">{{item}}</span>
			</div>
			<div class="send-gft-btn-wrap fr">
				<a href="javascript:;" class="gift-recharge-btn" @click="sendGift">赠送</a>
			</div>
		</div>
	</div>
</template>

<script>
	import { getGiftList } from '@/api/room'
	import 'swiper/dist/css/swiper.css'
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	import { sendGift } from '@/api/room'
	import { mapGetters } from 'vuex'
	export default {
		name: 'SendGift',
		inject: ['rechargeLogic'],
		components: {
			swiper,
			swiperSlide
		},
		props: {
			giftArr: {
				type: Array,
				default() {
					return []
				}
			},
			initData: {
				type: Object,
				data() {
					return {}
				}
			}
		},
		computed: {
			...mapGetters([
				'user',
				'roompara'
			]),
			swiperArr() {
				if(this.giftList.length) {
					let page = Math.ceil(this.giftList.length / 6)
					return new Array(page).fill(null).map((item, index) => {
						let start = index * 6
						let end = start + 6
						return this.giftList.slice(start, end)
					})
				} else {
					return []
				}
			}
		},
		data() {
			return{
				giftSelected: '',
				swiperOption: {
					pagination: {
						el: '.swiper-pagination',
						clickable: true
					}
				},
				page: 1,
				giftNumArr: [1, 5 ,10, 100],
				num: 1,
				activeGift: null,
				giftActiveIndex: 0,
				giftList: []
			}
		},
		methods: {
			giftClick(index, page, gift) {
				this.giftActiveIndex = index
				this.page = page + 1
				this.activeGift = gift
			},
			chooseNum(num) {
				this.num = num
			},
			closeGift() {
				this.$emit('close-gift')
			},
			sendGift() {
				if(!this.activeGift){
					this.$layer.open({
						content: '请选择要送的礼物!',
						skin: 'msg',
						time: 2
					});
					return false
				}
				if (!this.giftSelected) {
					this.$layer.open({
						content: '请选择礼物接受人!',
						skin: 'msg',
						time: 2
					});
					return false
				}
				const u = this.$parent.chat.getUser(this.giftSelected)
				if (u) {
					const param = {
						to_uid: this.giftSelected,
						to_room_id: u.appdata.room_id,
						gift_id: this.activeGift.gift_id,
						gift_sum: this.num,
						room_id: +this.initData.room_id,
						room_password: this.initData.room_password
					}
					sendGift(param).then(res => {
						this.$store.commit('SET_USER', Object.assign({}, this.user, {coin: res.data.coin}))
					}).catch(err => console.log(err))
				}
			}
		},
		created() {
			if(this.initData) {
				getGiftList(this.initData).then(res => {
					this.giftList = res.data
					this.activeGift = this.giftList[0]
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	$active-color: #4360F0;
	.send-gift-wrap{
		position: fixed;
		padding: 2.5rem 0.625rem 0.625rem;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #35394c;
		z-index: 15;
		font-size: 14px;
		color: #fff;
		visibility: hidden;
		&.active{
			visibility: visible;
		}
	}
	.send-gift-top-wrap{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.send-gift-close-icon{
		position: absolute;
		top: 0.625rem;
		right: 1.25rem;
		width: 1.125rem;
		height: 1.125rem;
		background: url(../../assets/images/gift/send-gift-close-icon.png) no-repeat;
		background-size: contain;
	}
	.send-gift-select-wrap{
		display: flex;
		position: relative;
		flex: 1;
		max-width: 10rem;
		align-items: center;
		select{
			flex: 1;
			height: 1.75rem;
			margin-left: 0.5rem;
			-webkit-appearance: none;
			background-color: #D2D2D2;
			border-radius: 0.25rem;
			text-indent: 0.375rem;
			color: #000
		}
		.send-gift-select-icon{
			position: absolute;
			width: 1rem;
			height: 0.5rem;
			top: 0;
			bottom: 0;
			right: 0.5rem;
			margin: auto;
			background: url(../../assets/images/gift/send-gift-select-icon.png) no-repeat;
			background-size: contain;
			transition: transform .2s ;
			transform: rotate(180deg);
		}
	}
	.gift-recharge-btn{
		display: inline-block;
		padding: 0 0.9375rem;
		margin-left: 0.375rem;
		font-size: 0.875rem;
		color: #fff;
		line-height: 1.875rem;
		background-color:	$active-color;
		border-radius: 1rem;
		vertical-align: middle;
	}
	.send-gift-coin-wrap{
		.ubi-num{
			display: inline-block;
			max-width: 11.2rem;
			vertical-align:  middle;
		}
	}
	.gift-wrap{
		padding: 5px 1.75rem;
		padding-bottom: 1.25rem;
	}
	.gift-item-a{
		display: inline-block;
		width: 5.625rem;
		margin-bottom: 0.375rem;
		text-align: center;
		font-size: 0.75rem;
		border: 2px solid transparent;
		vertical-align: top;
		box-sizing: border-box;
		&:nth-child(3n + 2){
			margin: 0 calc((100% - 3 * 5.625rem) / 2);
		}
		&.active{
			background-color: rgba(67,96,240,0.26);
			border-color: rgba(67,96,240,0.26);
		}
	}
	.send-gift-wrap  .swiper-pagination-bullets{
		bottom: 0.25rem;
	}
	.num-btn{
		display: inline-block;
		width: 2.5rem;
		height: 1.875rem;
		margin-left: 0.875rem;
		line-height: 1.875rem;
		border: 1px solid #fff;
		border-radius: 0.375rem;
		box-sizing: border-box;
		text-align: center;
		&.active{
			background-color: $active-color;
			border-color: $active-color;
		}
	}
	.send-gift-middle-wrap{
		margin: 1.25rem 0;
	}
</style>
<style>
	.send-gift-wrap .swiper-pagination-bullets .swiper-pagination-bullet{
		background-color: #a1a1a1;
	}
	.send-gift-wrap .swiper-pagination-bullets .swiper-pagination-bullet-active{
		background-color: #fff;
	}
</style>
